<template>
  <page title="住宿需求审批" :hasBack="false">
    <el-row :gutter="20" class="header-title">
      <el-col :span="6">
      </el-col>
      <el-col :span="2">
        <span class="center">排序方式</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="sortType" placeholder="按申请时间" @change="handleSort">
          <el-option
              v-for="item in sort"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <span class="center">承办部门</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="partType" placeholder="全部">
          <el-option
              v-for="item in part"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <span class="center">项目名称</span>
      </el-col>
      <el-col :span="4">
        <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
      </el-col>
    </el-row>
    <el-table ref="table" :data="table" header-cell-class-name="table-header" :default-sort="{ prop: 'createTime',order: 'descending'}">
      <el-table-column
          prop="needStatus"
          sortable
          label="状态">
        <template #default="scope">
          <el-tag class="tag" :type="statusMap[scope.row.needStatus].type" effect="dark">
            {{ statusMap[scope.row.needStatus].status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="项目名称">
      </el-table-column>
      <el-table-column
          label="培训时间">
        <template #default="scope">
          <p style="margin: 0;">起:{{scope.row.startDate.substring(0,10)}}</p>
          <p style="margin: 0;">止:{{scope.row.endDate.substring(0,10)}}</p>
        </template>
      </el-table-column>
      <el-table-column
          label="承办部门">
        <template #default="scope">
          {{scope.row.part.name}}
        </template>
      </el-table-column>
      <el-table-column
          label="申请人">
        <template #default="scope">
          {{scope.row.user.name}}
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          sortable
          label="申请时间">
      </el-table-column>
      <el-table-column
          prop="approveTime"
          label="审批时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleLook(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" class="footer-pager">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 12, 14, 16]"
          :page-size="currentSize"
          layout="sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-row>
  </page>
</template>

<script>
import page from "@/components/Page";
import axios from "axios";

export default {
  name:'myList',
  components:{
    page
  },
	data() {
		return {
			tableData:[],
			sort:[{
				value: '1',
				label: '按申请时间'
			}, {
				value: '2',
				label: '按申请状态'
			}],
			part:[{
				id:'0',
				name: "全部"
			}],
			statusMap:{
				"0":{
					type:"warning",
					status:"审批中",
				},
				"1":{
					type:"danger",
					status:"待修改",
				},
				"2":{
					type:"success",
					status:"已通过",
				},
			},
			currentPage: 1,
      currentSize: 8,
			partType: '',
			searchKey:'',
			sortType: '',
		};
	},
	methods:{
		handleLook(index,row){
      this.$router.push('accApp?id='+row.id);
		},
		handleSizeChange(val) {
      this.currentSize = val;
		},
		handleCurrentChange(val) {
      this.currentPage = val;
		},
    findAllAccProject(){
      return axios.get(this.$host+"/project/accneed").then(response=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }
      })
    },
    findAllPart(){
      return axios.get(this.$host+"/part").then(response=>{
        if(response.data.code === 0){
          this.part.push(...response.data.data);
        }
      })
    },
    handleSort(val){
      console.log(val);
      switch (val){
        case "1":
          console.log("createTime")
          this.$refs.table.sort("createTime","ascending")
          break;
        case "2":
          console.log("projectStatus")
          this.$refs.table.sort("needStatus","ascending")
          break;
      }
    },
	},
  created() {
    this.findAllAccProject().then(()=>this.findAllPart());
  },
  computed:{
    table(){
      return this.tableData.slice((this.currentPage-1)*this.currentSize,
          Math.min(this.currentPage*this.currentSize,this.tableData.length)).filter((value)=>{
        return this.partType === ''||this.partType ==='0'|| value.part.id === this.partType;
      }).filter((value => {
        return this.searchKey === ''|| value.name.indexOf(this.searchKey) !== -1;
      }));
    }
  }
}
</script>

<style scoped>
body{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  margin: 0;
}
.tag{
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
}
</style>